<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container :class="{ asideFixed2: asideFixed }">
      <el-main :class="{ asideFixed1: asideFixed }">
        <div class="a" v-for="item in article" :key="item.id">
          <ArticleCard :msg="item"> </ArticleCard>
        </div>
      </el-main>

      <el-aside
        id="fixedNav1"
        width="300px"
        :class="{ asideFixed: asideFixed }"
      >
        <CarouselCard></CarouselCard>
        <HotArticleCard></HotArticleCard>

        <ActivityCalendarCard></ActivityCalendarCard>
        <MemberExclusiveCard></MemberExclusiveCard>
      </el-aside>
    </el-container>
    <div class="page">
      <el-pagination
        layout="prev, pager, next"
        :total="totalPage"
        @current-change="getPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ArticleCard from "@/components/card/ArticleCard.vue";
import CarouselCard from "@/components/card/CarouselCard.vue";
import HotArticleCard from "@/components/card/HotArticleCard.vue";
import ActivityCalendarCard from "@/components/card/ActivityCalendarCard.vue";
import MemberExclusiveCard from "@/components/card/MemberExclusiveCard.vue";
import { getArticle } from "@/api/article";
export default {
  components: {
    ArticleCard,
    CarouselCard,
    HotArticleCard,
    ActivityCalendarCard,
    MemberExclusiveCard,
  },
  data() {
    return {
      asideFixed: false,
      asideTop: 0,
      timer: null,
      count: 0,
      totalPage: 0,
      page: {
        findMsg: null,
        pageNumber: 1,
      },
      article: [],
    };
  },
  created() {
    getArticle(this.page).then((res) => {
      this.article = res.data;
      this.totalPage = res.data[0].total * 10;
    });
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight1);
    this.timer = setInterval(() => {
      let navDom = document.getElementById("fixedNav1");
      if (document.readyState === "complete" && navDom) {
        this.asideTop = navDom.offsetTop;
        window.clearInterval(this.timer);
      }
    }, 500);
  },
  methods: {
    getPage(val) {
      this.page.pageNumber = val;
      getArticle(this.page).then((res) => {
        this.article = res.data;
        // this.totalPage=res.data[0].total*10
      });
    },

    initHeight1() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.asideFixed = scrollTop > this.asideTop + 400 ? true : false;
    },
  },
  destroyed() {
    //移除监听
    window.removeEventListener("scroll", this.initHeight1);
  },
};
</script>

<style scoped lang="less">
.page {
  width: 350px;
  margin: 0 auto;
}
.asideFixed {
  position: fixed;
  left: 70%;
  // right: 15%;
  top: -1000px;
  z-index: 1;
  display: block;
}
.asideFixed1 {
  position: relative;
  // left: 300px;
  // margin-right: 100px;
  display: block;
  // width: 800px;
}
.asideFixed2 {
  width: 74%;
}

.el-container {
  // width: 1000px;
  // padding: 80px;
  // width: 100%;

  overflow: hidden;
}
.a {
  margin-top: 10px;
}

.el-main {
  // position: relative;
  background-color: #f2f6fc;
  color: #333;
  // line-height: 0px;
  // margin-right: 20px;
  // width: 800px;
}
.el-aside {
  margin-top: 10px;

  // margin-right: 100px;
  // width: 500px;
}
</style>